<template>
  <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
  >
    <el-tab-pane label="销氪绑定商家" name="AgentBindMerchant"> <AgentBindMerchant/> </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import AgentBindMerchant from "../components/bindComponent/AgentBindMerchant.vue";

const activeName = ref('AgentBindMerchant')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}


</script>

<style scoped>
/* 通用样式 */
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

/* 标签的通用样式 */
::v-deep .el-tabs__item {
  opacity: 0.5; /* 未选中时的透明度 */
}

/* 选中标签样式 */
::v-deep .el-tabs__item.is-active {
  opacity: 1; /* 选中时的透明度 */
}

/* 悬浮标签样式 */
::v-deep .el-tabs__item:hover {
  cursor: pointer;
  opacity: 1; /* 悬浮时的透明度 */
}

/* 去下划线 */
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

/* 下划线颜色 */
::v-deep .el-tabs__active-bar {
  background-color: currentColor; /* 使用当前文字颜色 */
}

/* 浅色模式 */
body {
  --tab-color: black; /* 设置浅色模式下的标签颜色 */
}

/* 深色模式 */
body.dark-mode {
  --tab-color: white; /* 设置深色模式下的标签颜色 */
}

/* 使用变量来设置标签颜色 */
::v-deep .el-tabs__item,
::v-deep .el-tabs__item.is-active,
::v-deep .el-tabs__item:hover {
  color: var(--tab-color);
}
</style>